<template>
  <PageWrapper :class="prefixCls" title="图书列表">
    <template #headerContent>
      <BasicForm
        :class="`${prefixCls}__header-form`"
        :labelWidth="100"
        :schemas="schemas"
        showActionButtonGroup
        @submit="handleSearch"
      />
    </template>

    <div :class="`${prefixCls}__container`">
      <a-list>
        <template v-for="item in list" :key="item.id">
          <a-list-item>
            <template #extra>
              <a 
                :href="`${baseImgUrl}${item.cover}`"
                target="_blank"
              >
                <img
                  :class="`${prefixCls}__cover`"
                  alt="logo"
                  :src="`${baseImgUrl}${item.cover}`"
                />
              </a>
            </template>
            <a-list-item-meta>
              <template #description>
                <div :class="`${prefixCls}__action`">
                  <template v-for="action in actions" :key="action.icon">
                    <div :class="`${prefixCls}__action-item`">
                      <Icon
                        v-if="action.icon"
                        :class="`${prefixCls}__action-icon`"
                        :icon="action.icon"
                        :color="action.color"
                      />
                      {{ action.text }}
                    </div>
                  </template>
                  <span :class="`${prefixCls}__time`">{{ item.time }}</span>
                </div>
                <div :class="`${prefixCls}__btns`">
                  <a-button type="primary" size="small" @click="editBook(item.id)">编辑</a-button>
                  <a-button type="primary" size="small" danger @click="deleteBook(item.id)">删除</a-button>
                </div>
              </template>
              <template #title>
                <p :class="`${prefixCls}__title`">
                  {{ item.title }} ({{ item.id }})
                </p>
                <div>
                  <div :class="`${prefixCls}__content`">
                    {{ item.content }}
                  </div>
                  <template v-for="tag in item.description" :key="tag">
                    <Tag class="mb-2">
                      {{ tag }}
                    </Tag>
                  </template>
                  <div :class="`${prefixCls}__publisher`">{{ item.publisher }}</div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="text-center mt-2 p-2">
      <a-pagination
        :total="total"
        :show-total="total => `共计 ${total} 条数据`"
        :page-size="searchData.limit"
        v-model:current="searchData.page"
        show-size-changer
        @change="onPageChange"
      />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { Tag, List, Pagination, Modal } from 'ant-design-vue';
  import { defineComponent, ref, unref } from 'vue';
  import Icon from '../../../components/Icon/Icon.vue';
  import { BasicForm } from '../../../components/Form/index';
  import { actions, searchList, schemas, removeBook } from './data';
  import { type SearchOption } from './data';
  import { PageWrapper } from '../../../components/Page';

  const list = ref();
  const total = ref(0);
  const searchData = ref<SearchOption>({
    page: 1,
    limit: 10
  });
  
  const getList = (params) => {
    searchList(params).then((res) => {
      list.value = res.result;
      total.value = res.total;
    });
  }

  export default defineComponent({
    components: {
      Icon,
      Tag,
      BasicForm,
      PageWrapper,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
      [Pagination.name]: Pagination,
    },
    mounted(){
      getList(unref(searchData))
    },
    setup() {
      const baseImgUrl = 'http://localhost:5173/cover/';
      // const baseImgUrl = 'http://47.121.138.148:26200/cover/';
      // const current1 = ref(searchData.value.page);
      const handleSearch = (e) => {
        console.log('handleSearch', e);
        searchData.value = {
          page: 1,
          limit: 10,
          title: e.name,
          author: e.author
        }
        getList(unref(searchData))
      };

      const onPageChange = (page, pageSize) => {
        searchData.value.page = page;
        searchData.value.limit = pageSize;
        getList(unref(searchData))
      }

      const editBook = (id) => {
        console.log('editBook', id);
      }

      const deleteBook = (id) => {
        Modal.confirm({
          title: () => '提示',
          content: () => '确定要删除 id 为 ' + id + ' 的书吗？',
          onOk() {
            removeBook(id).then(res => {
              getList(unref(searchData));
            })
          }
        });
      }
      return {
        prefixCls: 'list-search',
        list,
        actions,
        schemas,
        total,
        searchData,
        baseImgUrl,
        handleSearch,
        onPageChange,
        editBook,
        deleteBook,
      };
    },
  });
</script>
<style lang="less" scoped>
  .list-search {
    &__header {
      &-form {
        margin-bottom: -16px;
      }
    }

    &__container {
      padding: 12px;
      background-color: @component-background;
    }

    &__cover {
      width: 126px;
      height: 180px;
      object-fit: cover;
    }

    &__title {
      margin-bottom: 0;
      font-size: 18px;
      cursor: pointer;
    }

    &__content {
      margin-bottom: 12px;
      color: @text-color-secondary;
    }

    &__publisher {
      margin-top: 12px;
      color: @text-color-secondary;
    }

    &__action {
      margin-top: 10px;

      &-item {
        display: inline-block;
        padding: 0 16px;
        color: @text-color-secondary;

        &:nth-child(1) {
          padding-left: 0;
        }

        &:nth-child(1),
        &:nth-child(2) {
          border-right: 1px solid @border-color-base;
        }
      }

      &-icon {
        margin-right: 3px;
      }
    }

    &__btns {
      margin-top: 10px;
    }

    &__time {
      // position: absolute;
      // right: 20px;
      margin-left: 20px;
      color: rgb(0 0 0 / 45%);
    }
  }
</style>
